<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>鑫舆汇</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/nav.css" rel="stylesheet">
    <link href="css/css.css" rel="stylesheet">
    <style>
     .slider{max-width:1920px;text-align:center;}
	 .heights{height:30px;}
    </style>
      <script src="js/jquery.min.js"></script>
      <script src="js/vue.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
  </head>
  <body>
  <div id="app">
    <div class="heads">
     <div class="top">
      <span class="headerRight"><img src="images/phone.png" width="273" height="19" /></span>
     </div><!--top/-->
    </div><!--heads/-->
    <h1 class="xlogo">
     <a href="index.html"><img src="images/logo.png" width="210" height="77" /></a>
    </h1>
    <nav class="nav-collapse">
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="recommend.html">推荐车源</a>
         <div class="chilNav">
          <div class="row chilNavCar">
          <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
              <img data-src="holder.js/300x300" src="images/car1.jpg" alt="...">
              <div class="caption">
                <h3>43.8万</h3>
                <p>魅•力之承 2014捷豹城市巡展”</p>
                <p><a href="proinfo.html" class="more">查看更多&gt;&gt;</a></p>
              </div>
             </div>
            </div><!--col-sm-6 col-md-2/-->

            <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
              <img data-src="holder.js/300x300" src="images/car1.jpg" alt="...">
              <div class="caption">
                <h3>43.8万</h3>
                <p>魅•力之承 2014捷豹城市巡展”</p>
                <p><a href="proinfo.html" class="more">查看更多&gt;&gt;</a></p>
              </div>
             </div>
            </div><!--col-sm-6 col-md-2/-->
            <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
              <img data-src="holder.js/300x300" src="images/car1.jpg" alt="...">
              <div class="caption">
                <h3>43.8万</h3>
                <p>魅•力之承 2014捷豹城市巡展”</p>
                <p><a href="proinfo.html" class="more">查看更多&gt;&gt;</a></p>
              </div>
             </div>
            </div><!--col-sm-6 col-md-2/-->
            <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
              <img data-src="holder.js/300x300" src="images/car1.jpg" alt="...">
              <div class="caption">
                <h3>43.8万</h3>
                <p>魅•力之承 2014捷豹城市巡展”</p>
                <p><a href="proinfo.html" class="more">查看更多&gt;&gt;</a></p>
              </div>
             </div>
            </div><!--col-sm-6 col-md-2/-->
            <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
              <img data-src="holder.js/300x300" src="images/car1.jpg" alt="...">
              <div class="caption">
                <h3>43.8万</h3>
                <p>魅•力之承 2014捷豹城市巡展”</p>
                <p><a href="proinfo.html" class="more">查看更多&gt;&gt;</a></p>
              </div>
             </div>
            </div><!--col-sm-6 col-md-2/-->
          </div><!--row/-->
         </div><!--chilNav/-->
        </li>
        <li class="navCur"><a href="select.html">选车中心</a></li>
        <li><a href="service.html">金融服务</a>
         <div class="chilNav" id="chilNav">
          <div class="chiNava"><a href="service.html">信贷</a></div>
          <div class="chiNava"><a href="service.html">车险</a></div>
         </div><!--chilNav/-->
        </li>
        <li><a href="business.html">买卖流程</a></li>
        <li><a href="contact.html">联系我们</a></li>
      </ul>
     </nav>
    <div class="heights">&nbsp;</div>
    <h4 class="h4Title">搜搜其他上海在售二手车:{{this.allParam.carYear}}{{this.allParam.carType}}</h4>
    <div class="selectBox">
     <table width="100%">
      <tr>
       <td class="sel1"><h5 class="h5Title">价位：</h5></td>
       <td>
        <div class="sel2">
        <a href="#">7-10万</a>
        <a href="#">10-15万</a>
        <a href="#">15-20万</a>
        <a href="#">20-30万</a>
        <a href="#">30-50万</a>
        <a href="#">50-80万</a>
        <a href="#">80万以上</a>
        </div><!--sel2/-->
       </td>
      </tr>
      <tr>
       <td class="sel1"><h5 class="h5Title">品牌：</h5></td>
       <td>
       <div class="sel2">
        <a href="#">奥迪</a>
        <a href="#">大众</a>
        <a href="#">宝马</a>
        <a href="#">丰田</a>
        <a href="#">奔驰</a>
        <a href="#">路虎</a>
        <a href="#">保时捷</a>
        <a href="#">沃尔沃</a>
        <a href="#">别克</a>
        <a href="#">福特</a>
        <a href="#">现代</a>
        <a href="#">日产</a>
        <a href="#">起亚</a>
        <a href="#">雪铁龙</a>
        </div><!--sel2/-->
       </td>
      </tr>
      <tr>
       <td class="sel1"><h5 class="h5Title">车龄：</h5></td>
       <td>
       <div class="sel2">
        <a v-for="y in years" v-on:click="handler('year',y)">{{y}}</a>
        </div><!--sel2/-->
       </td>
      </tr>
      <tr>
       <td class="sel1"><h5 class="h5Title">车型：</h5></td>
       <td>
       <div class="sel2">
        <a v-for="i in type" v-on:click="handler('type',i)">{{i}}</a>
        </div><!--sel2/-->
       </td>
      </tr>
      <tr>
       <td colspan="2" align="center">
        <div class="btn-group">
        <button type="button" class="btn btn-default" style="font-weight:800;color:#000;" v-on:click="getSearch()">&nbsp;&nbsp;&nbsp;搜&nbsp;索&nbsp;&nbsp;&nbsp;</button>
        </div>
       </td>
      </tr>
     </table><!--/-->
    </div><!--selectBox/-->
    <!--selectCar-->
    <div id="Car">
     <div class="row">
          <div class="col-sm-6 col-md-3" v-for="item in infoData">
              <div class="thumbnail">
                  <img data-src="holder.js/300x300" src="images/selcar1.jpg" alt="...">
                  <div class="caption">
                      <h3>{{item.name}}</h3>
                      <p>{{item.carDesc}}</p>
                      <p><a href="proinfo.html" class="more">查看更多&gt;&gt;</a></p>
                  </div>
              </div>
          </div>


          </div><!--row/-->
    </div><!--Car/-->
    <!--selectCar-->
    <div class="footer">
     <p>
      <a href="index.html">首页</a>
      <a href="recommend.html">推荐车源</a>
      <a href="select.html">选车中心</a>
      <a href="service.html">金融服务</a>
      <a href="business.html">买卖流程</a>
      <a href="job.html">人才招聘</a>
      <a href="contact.html" style="border:0;">联系我们</a>
     </p>
     <p>CopyRight © 2014 鑫舆汇 All Rights Reserved.</p>
     <p>沪ICP备 12007626号-1 公安备案号</p>
     <p>版权所有：上海市闵行区吴中路1189号2A展示区</p>
    </div><!--footer/-->

  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
  <script src="js/js.js"></script>
  <!--响应式导航-->
  <script>
      var navigation = responsiveNav(".nav-collapse", {
          animate: true,                    // Boolean: Use CSS3 transitions, true or false
          transition: 284,                  // Integer: Speed of the transition, in milliseconds
          label: "Menu",                    // String: Label for the navigation toggle
          insert: "after",                  // String: Insert the toggle before or after the navigation
          customToggle: "",                 // Selector: Specify the ID of a custom toggle
          closeOnNavClick: false,           // Boolean: Close the navigation when one of the links are clicked
          openPos: "relative",              // String: Position of the opened nav, relative or static
          navClass: "nav-collapse",         // String: Default CSS class. If changed, you need to edit the CSS too!
          navActiveClass: "js-nav-active",  // String: Class that is added to <html> element when nav is active
          jsClass: "js",                    // String: 'JS enabled' class which is added to <html> element
          init: function(){},               // Function: Init callback
          open: function(){},               // Function: Open callback
          close: function(){}               // Function: Close callback
      });
  </script>
  <script>
      var vm = new Vue({
              el: '#app',
              data:{
                  // type:['微型车','小型车','紧凑型车','紧凑型车','中型车','中大型车','豪华车','MPV','SUV','跑车','皮卡','微面上'],
                  type:[],
                  years:['1年以内', '1-3年', '3-5年', '5-8年', '8-10年' ,'10年以上'],
                  allParam:{
                      carYear:[],
                      carType:[]
                  },
                  infoData:[]
              },
              created:function(){
                  console.log('created创建了;'+this.msg)
              },
              mounted:function(){
                  //一般会在这儿加载数据
                  console.log('mounted执行了;'+this.msg)
                  this.init()
                  this.getSearch();
              },
              methods:{
                  init:function (){
                      var that = this
                      $.get("info/config_car_type", function(res){
                          if (res.code == 200){
                              localStorage.setItem("config_car_type", res.data)
                              that.type=res.data.split(',')
                          }else {
                              alert("参数错误")
                          }
                      });
                  },
                  getSearch:function(){
                     console.log(this.allParam)
                      //发送ajax请求
                      var that = this;
                      $.ajax({
                          type: "POST",
                          url: "info/list",//发送请求
                          data: this.allParam,
                          // contentType:"application/json;charset=utf-8",
                          success: function (result) {
                              console.log(result)
                              if (result.code == 0){
                                  that.infoData = result.data
                              }else {

                              }
                          },
                          error: function (err) {
                              console.error(err)
                          },
                          complete: function (res) {
                              // 关闭弹出层
                              // layer.close(index);

                          }
                      })
                  },
                  handler:function(type,param){
                      console.log("点击事件"+param+"---"+type)
                      if (type == 'year'){
                          var index = this.allParam.carYear.indexOf(param);
                          if (index > -1){
                              //值移除数组
                              this.allParam.carYear.splice(index, 1);
                          }else {
                              this.allParam.carYear.push(param)
                          }
                      }else if (type == 'type'){
                          var index = this.allParam.carType.indexOf(param);
                          if (index > -1){
                              //值移除数组
                              this.allParam.carType.splice(index, 1);
                          }else {
                              this.allParam.carType.push(param)
                          }
                      }
                      console.log(this.allParam)
                  }
              }
          }
      )
  </script>
  </body>
</html>
